<template>
	<view class="all-file">
		<view v-if="files.length === 0" class="no-data">
			<text>无附件</text>
		</view>
		<view v-else>
			<view class="image__files" v-if="showFile">
				<block v-for="(image, index) in allFiles.imageFiles" :key="index">
					<view class="image__file">
						<image class="image__img" :src="getImg(image.id)" @tap="previewImage(image.id)"></image>
						<view v-if="hasdeleted" class="image__delete" @click="deleteImage(image)">
							<uni-icons type="closeempty" size="20" color="#fff" class="image__delete-icon"></uni-icons>
						</view>
					</view>
				</block>
			</view>	
			
			<view class="mix__files" v-if="showFile">
				<block v-for="(item, index) in allFiles.otherFiles" :key="index">
					<view class="mix__file" @click="show(item)">
						<image class="file-img" :src="getIcon(item)"></image>
						<view class="file-content">
							<view class="file-name" @click.stop="rename(item)">{{item.name}}</view>
							<view class="file-size" v-if="item.size">{{getFileSize(item)}}</view>
						</view>
						<view class="file-delete" v-if="hasdeleted">
							<view class="delete-text" @click.stop="deleteFile(item)">删除</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" title="重命名" :value="currentFile.name" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { file } from '@/utils/common.js'
	
	export default {
		props: {
			files: {
				type: Array,
				default() {
					return []
				}
			},
			hasdeleted: {
				type: Boolean,
				default: false
			},
			emitkey: {
				type: String,
				default: ''
			},
			source: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				showFile: true,
				allFiles: {},
				currentFile: {}
			}
		},
		watch: {
			files(n, o) {
				this.files = n
				this.loadData()
			}
		},
		created() {
			this.loadData()
		},
		methods: {
			loadData() {
				let imageFiles = []
				let otherFiles = []
				this.files.forEach(item=>{
					if(file.checkIsImg(item)){
						imageFiles.push(item)
					}else{
						otherFiles.push(item)
					}
				})
				this.allFiles.imageFiles = imageFiles
				this.allFiles.otherFiles = otherFiles
			},
			getImg(fileId) {
				return file.previewImage(fileId)
			},
			previewImage(fileId) {
				return file.showImage(fileId)
			},
			deleteImage(image) {
				this.showFile = false
				let files = this.allFiles.imageFiles
				for(let i=0;i<files.length;i++) {
					if(files[i].id === image.id) {
						files.splice(i, 1)
					}
				}
				this.showFile = true
				if(this.source) {
					let data = {
						source: this.source,
						file: image
					}
					uni.$emit(this.emitkey, data)
				} else {
					uni.$emit(this.emitkey, image)
				}
			},
			getIcon(item) {
				if(file.checkIsImg(item)){
					return '/static/images/icon/image-ico.png'
				}else if(file.checkIsAudio(item)){
					return '/static/images/icon/audio.png'
				}else if(file.checkIsVideo(item)){
					return '/static/images/icon/video.png'
				}else if(item.ext === 'txt'){
					return '/static/images/icon/txt-ico.png'
				}else if(item.ext === 'pdf'){
					return '/static/images/icon/pdf-ico.png'
				}else if(item.ext === 'docx' || item.ext === 'doc'){
					return '/static/images/icon/word-ico.png'
				}else if(item.ext === 'xls' || item.ext === 'xlsx'){
					return '/static/images/icon/excel-ico.png'
				}else{
					return '/static/images/icon/attachment.png'
				}
			},
			getFileSize(item) {
				let size = file.getFileSize(item.size)
				if(size > 1000) {
					size = (size / 1024).toFixed(2) + "MB"
				} else {
					size = size + "KB"
				}
				return size
			},
			deleteFile(item) {
				const _this = this
				uni.showModal({
				    title: _this.$t('baseCommon.message.tips'),
				    content: '确定要删除该文件吗？',
				    success: function (res) {
				        if (res.confirm) {
							_this.showFile = false
							let files = _this.allFiles.otherFiles
							for(let i=0;i<files.length;i++) {
								if(files[i].id === item.id) {
									files.splice(i, 1)
								}
							}
							_this.showFile = true
							if(_this.source) {
								let data = {
									source: _this.source,
									file: item
								}
								uni.$emit(_this.emitkey, data)
							} else {
								uni.$emit(_this.emitkey, item)
							}
						}
					}
				})
			},
			show(item) {
				if(file.checkIsVideo(item)){
					uni.navigateTo({
						url: "/pages/base/video?fileId="+item.id
					})
				}else if(file.checkIsAudio(item)){
					uni.navigateTo({
						url: "/pages/base/audio?fileId="+item.id+"&fileName="+item.name+"&fileSize="+this.getFileSize(item)
					})
				}else{
					let fileName = item.name + "." + item.ext
					file.downloadFile(item.id, fileName)
				}
			},
			rename(item) {
				if(this.hasdeleted) {
					this.currentFile = item
					this.$refs.popup.open()
				}
			},
			confirm(done, val) {
				this.$refs.popup.close()
				this.fileModifyName(val)
			},
			fileModifyName(fileName) {
				let fileInfo = {
					file: this.currentFile,
					newFileName: fileName
				}
				this.$emit("modifyName", fileInfo)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all-file {
		width: 100%;
		padding: 8px 4px;
		background-color: #fff;
	}
	
	.image__files {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.image__file {
		position: relative;
		margin: 5px;
		cursor: pointer;
	}
	
	.image__file:first-child {
		margin-left: 0;
	}
	
	.image__file:last-child {
		margin-right: 0;
	}
	
	.image__img {
		display: block;
		width: 80px;
		height: 80px;
	}
	
	.image__delete{
		position: absolute;
		top: 0;
		right: 0;
		width: 14px;
		height: 14px;
		padding: 0 0 8px 8px
	}
	
	.image__delete:after{
		position: absolute;
		top: 0;
		right: 0;
		width: 14px;
		height: 14px;
		background-color: rgba(0,0,0,.7);
		border-radius: 0 0 0 12px;
		content: ""
	}
	
	.image__delete-icon{
		position: absolute;
		top: -5px;
		right: -4px;
		z-index: 1;
		transform: scale(.5)
	}
	
	.mix__file {
		display: flex;
		align-items: center;
		margin-top: 10px;
		width: 100%;
		
		.file-img { 
			height: 35px;
			width: 35px;
		}
		
		.file-content { 
			width: calc(100% - 105px);
			margin: 0 8px;
			font-size: 14px;
			
			.file-name {
				white-space: nowrap;/*设置不换行*/
				overflow: hidden; /*设置隐藏*/
				text-overflow: ellipsis; /*设置隐藏部分为省略号*/
			}
			
			.file-size {
				color: $uni-text-color-grey;
			}
		}
		
		.file-delete {
			height: 30px;
			width: 60rpx;
			background-color: #1e90e6;
			border-radius: 5px;
			
			.delete-text {
				color: #fff;
				text-align: center;
				line-height: 20px;
				margin: 5px 0; 
			}
		}
	}
	
	.no-data {
		margin: 10px;
		
		text {
			color: #999;
		}
	}
</style>
